<template>
    <div class="footMusic">
        <div class="footerLeft" v-if="playList" @click="updateDetailShow">
            <img :src="playList[playListIndex].al.picUrl"/>
            <div>
                <p>{{playList[playListIndex].name}}</p>
                <span>横滑切换上下首</span>
            </div>
        </div>
        <div class="footerRight">
            <svg class="icon" aria-hidden="true" v-if="isbtnShow" @click="play">
                <use xlink:href="#icon-bofanganniu"></use>
            </svg>
            <svg class="icon" aria-hidden="true" v-else @click="play">
                <use xlink:href="#icon-ziyuan99"></use>
            </svg>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-zu"></use>
            </svg>
        </div>
        <audio ref="audio" :src="`https://music.163.com/song/media/outer/url?id=${playList[playListIndex].id}.mp3`"></audio>
        <van-popup :show="detailShow" position="bottom" :style="{ height: '100%',width:'100%' }" >
            <musicDetail :musicList="playList[playListIndex]" :play="play" :isbtnShow="isbtnShow" :addDuration="addDuration"/>
        </van-popup>
    </div>
</template>
<script>
import { mapMutations, mapState } from 'vuex';
import musicDetail from '@/components/item/musicDetail.vue'
export default {
    data(){
        return{
            interVal:0
        }
    },
    computed:{
        ...mapState(['playList','playListIndex','isbtnShow','detailShow'])
    },
    mounted(){
        console.log(this.$refs);
        this.$store.dispatch("getLyric",this.playList[this.playListIndex].id);
        // this.updateTime();
    },
    updated(){
        this.addDuration();
    },
    methods:{
        play:function(){
            //判断音乐是否播放
            if(this.$refs.audio.paused){
                this.$refs.audio.play();
                this.updateIsbtnShow(false);
                this.updateTime();//播放就调用函数进行传值
            }else{
                this.$refs.audio.pause();
                this.updateIsbtnShow(true);
                clearInterval(this.interVal);//暂停清除定时器
            }
            
        },
        addDuration:function() {
            this.updateDuration(this.$refs.audio.duration)
        },
        updateTime:function(){
            this.interVal=setInterval(()=>{
                this.updateCurrentTime(this.$refs.audio.currentTime);
            },10)
        },
        ...mapMutations(['updateIsbtnShow','updateDetailShow','updateCurrentTime','updateDuration'])
    },
    watch:{
        playListIndex:function(){//监听如果下标发生改变，就自动播放音乐
            this.$refs.audio.autoplay=true;
            if(this.$refs.audio.paused){//如果本来是暂停状态，就改变图标为播放
                this.updateIsbtnShow(false);
            }
            this.$store.dispatch("getLyric",this.playList[this.playListIndex].id);
        },
        playList:function(){
            if(this.isbtnShow){
                this.$refs.audio.autoplay=true;
                this.updateIsbtnShow(false);
            }
        }
    },
    components:{
        musicDetail,
    }
}
</script>
<style lang="less" scoped>
.footMusic{
    width: 100%;
    height: 1.4rem;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    border-top: 1px solid #999;
    display: flex;
    padding: .2rem;
    justify-content: space-between;
    .footerLeft{
        width: 60%;
        height: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        img{
            width: 1rem;
            height: 1rem;
            border-radius: 50%;
        }
    }
    .footerRight{
        width: 18%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .icon{
            width: .56rem;
            height: .56rem;
            fill: black;
        }
    }
}
</style>